<template>
	<div class="chooser-component">
		<ul>
			<li @click="choose(index)" v-for="(item,index) in Radios" :class="{'active':index==nowIndex}">{{item.title}}</li>
		</ul>
	</div>
</template>

<script>
	export default{
		methods:{
			this.nowIndex=index;
			this.$emit("radios",this.Radios[index].value);
			this.$store.dispatch('updateOrder',['radios',this.Radios[index].value]);
		},
		name:'radios',
		data(){
			return{
				nowIndex:0
			}
		},
		props:{
			Radios:{
				type:Array,
				default:function(){
					return[
						{title:'1个月',value:1},
						{title:'3个月',value:2},
						{title:'6个月',value:3},
						{title:'年费',value:4}
					]
				}
			}
		}
	}
</script>

<style scoped> .chooser-component { position: relative; display: inline-block; }.chooser-list li{ display: inline-block; border: 1px solid #e3e3e3; height: 25px; line-height: 25px; padding: 0 8px; margin-right: 5px; border-radius: 3px; text-align: center; cursor: pointer; }.chooser-list li.active { border-color: #4fc08d; background: #4fc08d; color: #fff;
}</style>